<template>
  <div class="box">
    <div><center><h1 >OA管理系统</h1></center></div>
    <el-form :model="loginForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" >
        <el-form-item label="账号" prop="account">
            <el-input v-model="loginForm.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
            <el-input v-model="loginForm.code" placeholder="请输入图片验证码"></el-input><img @click="changeCode" :src="'http://127.0.0.1:8000/users/api/v1/imgcode/'+uuid+'/'" alt="">
        </el-form-item>
        <div><el-button @click="login">确认登录</el-button></div>
    </el-form>
  </div>
</template>

<script>
import {v4 as uuid4} from 'uuid'
export default {
    data(){
        var validateAccount = (rule, value, callback) => {
            if (!value) {
            return callback(new Error('账号不能为空'));
            }else {
            return callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('密码不能为空'));
            }else {
              callback();
            }
        };
        var validateCode = (rule, value, callback) => {
            if (!value) {
            callback(new Error('验证码不能为空'));
            }else {
              callback();
            }
        };
        return{
            loginForm:{
                account:'',
                password:'',
                code:'',
            },
            uuid:'',
            rules:{
                account:[
                    {required:true,message:'必须输入账号',trigger:'blur'},
                    {validator:validateAccount,trigger:'blur'}
                ],
                password:[
                    {required:true,message:'必须输入密码',trigger:'blur'},
                    {validator:validatePass,trigger:'blur'}
                ],
                code:[
                    {required:true,message:'必须输入验证码',trigger:'blur'},
                    {validator:validateCode,trigger:'blur'}
                ],
            }
        }
    },
    mounted(){
        this.changeCode()
    },
    methods:{
        changeCode(){
            this.uuid = uuid4()
        },
        login(){
            this.$refs['ruleForm'].validate(valid=>{
                if(valid){
                    this.$axios.post('users/api/v1/user/login/',{
                loginForm:this.loginForm,
                uuid:this.uuid
            })
            .then(res=>{
                console.log(res)
                if(res.data.code==200){
                    alert(res.data.msg)
                    localStorage.setItem('token',res.data.token)
                    this.$axios.post('users/api/v1/login-log/')
                    .then(res=>{
                        console.log(res)
                    })
                    this.$router.push('/home')

                }else{
                    alert(res.data.msg)
                }
            })
                }
            })
        }

    }
}
</script>

<style scoped>
.box{
    width: 40%;
    margin-left: 30%;
    margin-top: 5%;
}
</style>